<template>
  <el-row>
    <el-col :span="14">
      <div class="paly-book-wrapper center">
        <div class="play-book" ref="playBook"></div>
        <div class="btn-area">
          <el-button size="small" @click="handlePlayBook('first')">重置</el-button>
          <el-button size="small" @click="handlePlayBook('pause')">暂停</el-button>
          <el-button size="small" @click="handlePlayBook('play')">播放</el-button>
        </div>
        <div>
          <el-button class="arrow-btn" type="text" :disabled="currentIndex === 1" @click="handlePlayBook('previous')">&lt;</el-button>
          <div class="cur-frame">{{currentIndex}}</div>
          <el-button class="arrow-btn" type="text" :disabled="currentIndex === maxFrames" @click="handlePlayBook('next')">&gt;</el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="10" class="descrip">
      <h2>战术描述：</h2>
      <div class="descrip-content-wrapper" v-html="currentDesc"></div>
    </el-col>
  </el-row>
</template>
<script>
import {BasketBallPlaybook} from 'utils/playbook'
export default{
  props: {
    currentTab: String
  },
  computed: {
    tacticsInfo () {
      return this.$store.getters.tactics_info
    },
    currentIndex () {
      return (this.playbook.index + 1) || 1
    },
    currentDesc () {
      let result = ''
      if (this.tacticsInfo && this.tacticsInfo.frames && this.tacticsInfo.frames.length) {
        let index = this.currentIndex - 1
        let frames = this.tacticsInfo.frames
        // 当前帧没有描述，则往上找 找到为止
        while (!result && index >= 0) {
          result = frames[index].describe
          index--
        }
      }
      return result
    },
    maxFrames () {
      return (this.tacticsInfo && this.tacticsInfo.frames && this.tacticsInfo.frames.length) || 1
    }
  },
  watch: {
    // 根据切换tab触发渲染
    currentTab (val, oldVal) {
      if (val !== oldVal && val === 'details') {
        this._intitPalyBook()
      }
    }
    // 'tacticsInfo.key' () {
    //   this._intitPalyBook()
    // }
  },
  data () {
    return {
      playbook: {},
      preFrameBtnState: false,
      nextFrameBtnState: false
    }
  },
  mounted () {
    this._intitPalyBook()
  },
  methods: {
    _intitPalyBook () {
      let playbook = ''
      if (!this.$playbookLoad) {
        let playBookDom = this.$refs.playBook
        if (!playBookDom) {
          setTimeout(() => this._intitPalyBook(), 200)
          return !1
        }
        playbook = new BasketBallPlaybook(playBookDom)
        playbook.scale = 0.8
        playbook.width = parseInt(playbook.width) * playbook.scale
        playbook.height = parseInt(playbook.height) * playbook.scale
        this.$playbookLoad = true
      }
      this._loadPlayBookData(playbook || this.playbook)
    },
    _loadPlayBookData (playbook) {
      let { frames, sprites, type } = this.tacticsInfo
      if (type === 2 || type === 'half-up') {
        playbook.type = 'half-up'
      } else if (type === 3 || type === 'half-down') {
        playbook.type = 'half-down'
      } else {
        playbook.type = 'full'
      }
      playbook.deserialize({
        frames,
        sprites
      })
      playbook.update()
      this.playbook = playbook
    },
    handlePlayBook (type) {
      this.playbook[type]()
    }
  }
}
</script>
<style lang="scss">
.paly-book-wrapper{
  .play-book > div{
    margin: 0 auto;
  }
}
.btn-area{
  margin:40px auto 20px;
}
.cur-frame{
  display:inline-block;
  line-height: 38px;
}
.arrow-btn{
  min-width: 50px;
}
.descrip{
  h2{
    font-size:14px;
    font-weight: 700;
  }
  p{
    color: #666;
  }
}
</style>